<!-- 标题组件 -->
<template>
  <div class="finish-com" style="display: flex;justify-content: center;">
    <div ref="maychar" style="width: 1620px;height:100px;background-color: rgba(0,0,0,0);">
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  props: ['mes'],
  mounted() {
    this.getCharts();
  },

  methods: {
    getCharts() {
      const chartBox = this.$echarts.init(this.$refs.maychar);
      const option = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: this.mes,
                fontSize: 40,
                fontWeight: '5',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                // stroke: '#245c6f',
                stroke: "#02a0ea",
                lineWidth: 2,
              },
              keyframeAnimation: {
                duration: 3000,
                loop: false,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      // fill: '#245c6f'
                      fill: '#02a0ea'
                    }
                  }
                ]
              }
            }
          ]
        }
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      }, { passive: true });
    }
  }
}
</script>

<style lang="scss" scoped></style>